<!--
/***************************************************************************************************
* 搜索组件，配置驱动UI
* alias 挂载搜索接口对应字段
* name 现在的搜索项提示
* type 搜索项控件类型select（选择器）、input（输入框）、datetime（日期选择）、dialog（外部弹框）、tree（树形选择器）
***************************************************************************************************/
-->
<template>
    <div>
        <el-form
            :inline="true"
            :model="dataForm"
            ref="dataFrom"
            :rules="formRules"
            @keyup.enter.native="startSearch"
        >
            <template v-for="(item,index) in searchConfig">
                <template v-if="searchLimits.indexOf(item.alias) === -1">
                    <!--多选器-->
                    <el-form-item v-if="item.type === 'select'" :key="index" :prop="item.alias">
                        <el-select
                            v-model="dataForm[item.alias]"
                            :style="{width: item.width?`${item.width}`:'auto'}"
                            :placeholder="item.name"
                            :clearable="item.clearable!==undefined?item.clearable:true"
                        >
                            <el-option
                                v-for="option in selectOptions[item.alias]"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <!--级联选择器-->
                    <el-form-item v-if="item.type === 'cascade'" :key="index" :prop="item.alias">
                        <el-cascader
                            :style="{width: item.width?`${item.width}`:'auto'}"
                            v-model="dataForm[item.alias]"
                            :placeholder="item.name"
                            :options="cascadeOptions[item.alias]"
                            :props="cascadeProps"
                            :clearable="item.clearable!==undefined?item.clearable:true"
                        ></el-cascader>
                    </el-form-item>

                    <!--文本输入框-->
                    <el-form-item v-if="item.type === 'input'" :key="index" :prop="item.alias">
                        <el-input
                            v-model="dataForm[item.alias]"
                            size="mini"
                            :placeholder="item.name"
                            :clearable="item.clearable!==undefined?item.clearable:true"
                        ></el-input>
                    </el-form-item>

                    <!--日期时间选择器-->
                    <el-form-item v-if="item.type === 'datetime'" :key="index" :prop="item.alias">
                        <el-date-picker
                            v-model="dataForm[item.alias]"
                            type="datetime"
                            :placeholder="item.name"
                            align="right"
                            :clearable="item.clearable!==undefined?item.clearable:true"
                            :picker-options="pickerOptions"
                            :value-format="dateTimeValueFormat"
                        ></el-date-picker>
                    </el-form-item>

                    <!--日期选择器-->
                    <el-form-item v-if="item.type === 'date'" :key="index" :prop="item.alias">
                        <el-date-picker
                            v-model="dataForm[item.alias]"
                            type="date"
                            :placeholder="item.name"
                            align="right"
                            :clearable="item.clearable!==undefined?item.clearable:true"
                            :value-format="dateValueFormat"
                        ></el-date-picker>
                    </el-form-item>

                    <!--树形选择器-->
                    <el-form-item v-if="item.type === 'tree'" :key="index" :prop="item.alias">
                        <el-popover
                            placement="bottom-end"
                            trigger="click"
                            v-model="treeForm[item.alias]"
                        >
                            <div style="overflow-y:auto; width:100%; height:300px;">
                                <el-tree
                                    :data="treeOptions[item.alias].data"
                                    :props="treeOptions[item.alias].props"
                                    node-key="categoryId"
                                    @current-change="currentTreeChangeHandle([$event,item])"
                                    :default-expand-all="true"
                                    :highlight-current="true"
                                    :expand-on-click-node="false"
                                ></el-tree>
                            </div>
                            <el-input
                                filterable
                                v-model="dataForm[item.alias]"
                                :clearable="item.clearable!==undefined?item.clearable:true"
                                slot="reference"
                                :readonly="true"
                                :placeholder="item.name"
                                @clear="currentTreeClear([$event,item])"
                            ></el-input>
                        </el-popover>
                    </el-form-item>

                    <!--外部弹框选择数据-->
                    <el-form-item v-if="item.type === 'dialog'" :key="index" :prop="item.alias">
                        <el-input
                            v-model="dataForm[item.alias]"
                            :placeholder="item.name"
                            :clearable="item.clearable!==undefined?item.clearable:true"
                            @focus="showDialog([$event,item])"
                            @clear="currentTreeClear([$event,item])"
                        ></el-input>
                    </el-form-item>
                </template>
            </template>
            <el-form-item v-if="isShowQueryBtn">
                <el-button @click="startSearch" icon="el-icon-search">查询</el-button>
            </el-form-item>

            <!--扩展区-->
            <slot></slot>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    /**
     * 组件名字
     */
    name: 'SearchPanel',
    /**
     * 外部属性
     */
    props: {
        // 是否显示查询按钮
        isShowQueryBtn:{
            type:Boolean,
            default:true
        },
        isAudit: {
            type: Boolean,
            default: false
        },
        // 搜索项配置
        searchConfig: {
            type: Array,
            required: true
        },
        // 搜索项权限配置，是否显示搜索项，空代表全部显示
        searchLimits: {
            type: Array,
            default: () => {
                return [];
            }
        },
        // 选择器列表配置
        selectOptions: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 级联选择器配置
        cascadeOptions: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 级联选择器属性
        cascadeProps: {
            type: Object,
            default: () => {
                return { expandTrigger: 'hover' };
            }
        },
        // 树形选择器配置
        treeOptions: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 表单规则
        formRules: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 日期时间数据格式
        dateTimeValueFormat: {
            type: String,
            default: 'yyyy-MM-dd HH:mm:ss'
        },
        // 日期数据格式
        dateValueFormat: {
            type: String,
            default: 'yyyy-MM-dd'
        },

        // 时间默认快捷选择
        pickerOptions: {
            type: Object,
            default: () => {
                return {
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        },
                        {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }
                    ]
                };
            }
        }
    },

    /**
     * 定义属性
     */
    data() {
        return {
            // 挂在搜索条件
            dataForm: {},
            // 控制树形选择器的隐藏/显示
            treeForm: {}
        };
    },
    /**
     * 方法集
     */
    methods: {
        /***
         * 外部调用
         * 表单校验是否可用
         */
        formValidate() {
            return new Promise(resolve => {
                this.$refs.dataFrom.validate(valid => {
                    resolve([valid, this.dataForm]);
                });
            });
        },
        /***
         * 树形选择器当前选中发生改变
         * @param data
         * @param item
         */
        currentTreeChangeHandle([data, item]) {
            this.treeForm[item.alias] = false;
            this.$emit('currentTreeChangeHandle', [data, item]);
        },
        /***
         * 树形选择器绑定控件进行清空操作
         * @param event
         * @param item
         */
        currentTreeClear([event, item]) {
            this.$emit('currentTreeClear', item);
            this.$emit('currentDialogClear', item);
        },
        /***
         * 激活外部弹框，外部弹框选中数据后，需要进行搜索面板数据回填
         * @param data
         * @param item
         */
        showDialog([data, item]) {
            this.$emit('showDialog', [item, this.dataForm]);
        },
        /***
         * 触发搜索事件
         */
        startSearch() {
            this.$refs.dataFrom.validate(valid => {
                if (valid) {
                    this.$emit('startSearch', this.dataForm);
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
</style>
